<template>
  <el-table v-loading="loading" :border="true" :data="list">

    <el-table-column label="查看内容" type="expand" width="80">
      <template slot-scope="{row}">
        <el-form>
          <el-form-item label="新闻内容">
            <span v-html="row.body" />
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>

    <el-table-column label="新闻标题" prop="NewsTitle" />

    <!-- <el-table-column label="新闻简1介">
      <template slot-scope="{row}">
        <span>{{ row.body.slice(0,20) }}</span>
      </template>
    </el-table-column> -->

    <el-table-column label="发布时间" prop="dataTime" />

    <el-table-column label="操作" width="100" align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="handleDelete(scope.$index, scope.row)"
        > 删除</el-button>
      </template>
    </el-table-column>

  </el-table>
</template>

<script>
import { delNews } from '@/api/news'
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      miva: []
    }
  },
  created() {
    console.log(this.list)
  },
  methods: {
    async handleDelete(index, row) {
      const result = await delNews(row.id)
      this.list.splice(index, 1)
      this.$message({
        message: `(${row.id})${result.message}`,
        type: 'success'
      })
    }
  }
}
</script>
